<template>
    <div class="pe-badge">
        <slot></slot>
        <template v-if="!hidden && !(showZero && value === 0)">
            <div v-if="isDot" class="pr-badge-dot" :style="{ backgroundColor: color }"></div>
            <div v-else class="pe-badge-cir" :class="badgeClass"
                :style="[{ transform: `translate(${offset[0]}, ${offset[1]})`, backgroundColor: color }, badgeStyle]">{{
                getValue() }}</div>
        </template>
    </div>
</template>

<script setup lang="ts">

/**
 * @param value 显示值
 * @param max 最大值，超过最大值会显示 {max}+。 只有当 value 是数字类型时起作用。
 * @param is-dot 是否显示小圆点。
 * @param hidden 是否隐藏 Badge。
 * @param show-zero 值为零时是否显示 Badge
 * @param color 背景色
 * @param offset badge 的偏移量
 * @param badge-style 自定义 badge 样式
 * @param badge-class 自定义 badge 类名
 */
interface Props {
    value?: string | number,
    max?: number,
    isDot?: boolean,
    hidden?: boolean
    showZero?: boolean,
    color?: string,
    offset?: [string, string],
    badgeStyle?: any,
    badgeClass?: string
}

const props = withDefaults(defineProps<Props>(), {
    value: "",
    isDot: false,
    hidden: false,
    showZero: false,
    color: "#ff0000",
    offset: () => ["50%", "-50%"],
})

const getValue = () => {
    if (typeof props.value === 'number' && typeof props.max === 'number' && props.value > props.max) {
        return `${props.max}+`
    }
    return props.value
}
</script>

<script lang="ts">
export default {
    name: "pe-badge"
}
</script>